<template>
  <div class="user">
     <page-search
       :searchFormConfig='searchFormConfig'
       @resetBtnClick="handleResetClick" 
       @queryBtnClick="handleQueryClick">
     </page-search>
     <page-content
        ref='PageContentRef'
        :contentTableConfig='contentTableConfig'
        pageName='user'
        @newBtnClick="handleNewData"
        @editBtnClick="handleEditData"
       ></page-content>
    <page-modal 
    :modalConfig='modalConfigRef'
     ref="pageModalRef" 
     :defaultInfo='defaultInfo'
     pageName='user'
     ></page-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,computed } from 'vue'
import {useStore} from 'vuex'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'

export default defineComponent({
  name: 'user',
  components:{
    PageSearch,
    PageContent,
    PageModal

  }, 
  setup(props) {
    // // 处理公共逻辑
    const { handleQueryClick,handleResetClick,PageContentRef}= usePageSearch()
    
    // pagemodal相关逻辑
    const newCallback=()=>{
    const passwordItem=modalConfig.formItems.find(item=>item.field==='password')
      passwordItem!.isHidden=false
    }
    const editCallback=()=>{
      const passwordItem=modalConfig.formItems.find(item=>item.field==='password')
      passwordItem!.isHidden=true
    }
  
    const { handleNewData,handleEditData,pageModalRef,defaultInfo}=usePageModal(newCallback,editCallback)
     //动态添加部门和角色列表
     const store=useStore()
     const modalConfigRef=computed(()=>{
         //获取到配置
     const departmentItem=modalConfig.formItems.find((item)=>item.field==='departmentId')
     departmentItem!.options=store.state.entireDepartment.map((item)=>{
       return {title:item.name,value:item.id}
     })
 
       const roleItem=modalConfig.formItems.find((item)=>item.field==='roleId')
       roleItem!.options=store.state.entireRole.map((item)=>{
              return {title:item.name,value:item.id}
      })
       return modalConfig
     })
  
    return {
         searchFormConfig,
        //  getSelectchange,
         contentTableConfig,
         handleResetClick,
         handleQueryClick,
         PageContentRef,
           modalConfigRef,
           handleNewData,
           handleEditData,
           pageModalRef,
           defaultInfo

   
    }
  }
})
</script>

<style scoped>

</style>
